<template>
  <el-dialog
    title="从业人员安全培训档案"
    center
    append-to-body
    custom-class="user-detail-info"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="1000px"
  >
    <div style="textAlign:right;paddingRight:20px">
      <el-button type="text" icon="el-icon-document" @click="openView()">预览</el-button>
      <el-button type="text" icon="el-icon-download" @click="downloadPdf()">导出</el-button>
    </div>
    <el-tabs v-model="activeTab" class="user-detail-tabs" type="border-card" tab-position="left">
      <el-tab-pane label="基本信息" name="1" style="padding:10px 0;">
        <member-editor-inner ref="memberEditorInner" @saved="onSaved" :has-save-button="true" />
      </el-tab-pane>
      <el-tab-pane label="工作经历" name="2">
        <work-history ref="workHistory" v-if="activeTab==='2'" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane label="证件管理" name="3">
        <user-cert-manage ref="certManage" v-if="activeTab==='3'" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane label="违章记录" name="4">
        <user-break-rules ref="userBreakRules" v-if="activeTab==='4'" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane label="学习记录" name="5">
        <user-course-history ref="userCourseHistory" v-if="activeTab==='5'" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane label="考试记录" name="6">
        <user-exam-record ref="userExamRecord" v-if="activeTab==='6'" :user-id="userId" />
      </el-tab-pane>
    </el-tabs>

    <user-detail-view ref="view"></user-detail-view>
  </el-dialog>
</template>

<script>
import MemberEditorInner from './member-editor-inner'
import WorkHistory from './work-history'
import UserCertManage from './user-cert-manage'
import UserBreakRules from './user-break-rules'
import UserCourseHistory from './user-course-history'
import UserDetailView from './user-detail-view'
import UserExamRecord from './user-exam-record'

export default {
  name: 'userDetailInfo',
  data() {
    return {
      visible: false,
      userId: null,
      currentDept: null,
      activeTab: '1',
      editorVisible: false
    }
  },
  components: {
    MemberEditorInner,
    WorkHistory,
    UserCertManage,
    UserBreakRules,
    UserCourseHistory,
    UserDetailView,
    UserExamRecord
  },
  methods: {
    // 获取用户基本信息
    init(dept, userId) {
      this.$store.dispatch('user/loadCraftList')
      this.visible = true
      this.currentDept = dept
      this.userId = userId
      this.activeTab = '1'

      this.$nextTick(() => {
        this.$refs.memberEditorInner.init(dept, userId)
      })
    },
    onSaved() {
      this.$emit('refreshDataList')
    },
    openView() {
      this.$refs.view.open(this.userId)
    },
    // 下载PDF
    async downloadPdf() {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      let id = this.userId
      let res = await this.$http({
        method: 'post',
        url: `/usercenter-admin/user/useInfo2Word/${id}`,
        responseType: 'blob'
      })
      if (res.status === 200) {
        let filename = res.headers.filename
        var blob = new Blob([res.data], {
          type:
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'
        })
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = decodeURI(filename) // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      } else {
        this.$notify.error({title: '失败', message: '导出一人一档失败，请重试！'})
      }
      setTimeout(() => loading.close(), 300)
    }
  }
}
</script>

<style>
.user-detail-info > .el-dialog__body {
  padding: 0;
}

.user-detail-info > .el-dialog__body > .user-detail-tabs {
  height: 540px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
</style>
